﻿<script type="text/ng-template" id="customTemplate.html">
    <a>
        <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
        <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
    </a>
</script>
<div class='container-fluid' ng-controller="TypeaheadCtrl">

    <h4>Static arrays</h4>
    <pre>Model: {{selected | json}}</pre>
    <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">

    <h4>Asynchronous results</h4>
    <pre>Model: {{asyncSelected | json}}</pre>
    <input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" class="form-control">
    <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>

    <h4>Custom templates for results</h4>
    <pre>Model: {{customSelected | json}}</pre>
    <input type="text" ng-model="customSelected" placeholder="Custom template" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control ng-valid ng-dirty" aria-autocomplete="list" aria-expanded="false" aria-owns="typeahead-01O-9610">
</div>
<div ng-controller="AccordionDemoCtrl">
    <p>
        <button class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
        <button class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
    </p>

    <label class="checkbox">
        <input type="checkbox" ng-model="oneAtATime">
        Open only one at a time
    </label>
    <accordion close-others="oneAtATime">
        <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
            This content is straight in the template.
        </accordion-group>
        <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
            {{group.content}}
        </accordion-group>
        <accordion-group heading="Dynamic Body Content">
            <p>The body of the accordion group grows to fit the contents</p>
            <button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
            <div ng-repeat="item in items">{{item}}</div>
        </accordion-group>
        <accordion-group is-open="status.open">
            <accordion-heading>
                I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
            </accordion-heading>
            This is just some content to illustrate fancy headings.
        </accordion-group>
    </accordion>
</div>

<i class="fa fa-camera-retro fa-lg"></i>

<style>
    /*This CSS is the same as the boostrap from form-control, I used for input boxes on my custom angular forms
        because is no way known by me to aply classes to objects created dynamically.
    */

    input, textarea {
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        color: #555;
        font-size: 14px;
        height: 34px;
        line-height: 1.42857;
        padding: 6px 12px;
        transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        width: 100%;
        display: inline-block; /*this is the aligment of the boxes if remove boxes will be horizontal*/
        margin: 5px 5px 10px 10px;
    }

        input:focus {
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
        }
    /*this is a style from the angular form style*/
    .ng-invalid {
        border-color: #ff0000;
    }

    label {
        margin: 10px 10px 10px 10px;
    }
</style>

<dynamic-form ng-controller="formCreatorController" template="FormDataModelTemplate" ng-model="FormModelData"></dynamic-form>
